<template>
  <!-- 任务信息table组件  -->
  <div>
    <transition name="el-zoom-in-top">
      <div
        class="download"
        v-show="checkboxSelect > 0"
        style="margin-top: 15px"
      >
        <i class="el-icon-info"></i>
        共{{ total }}项，已选择<b>{{ checkboxSelect }}</b
        >项
        <span @click="excelDownload">下载</span>
        <em @click="cleanSelection">清空</em>
      </div>
    </transition>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      @selectionChange="downloadWhether"
      ref="multipleTable"
      :row-key="getRowKeys"
      @sort-change="sortChange"
    >
      <template v-if="indivdualId != undefined || serviceId != undefined || bussinessId != undefined">
         <el-table-column width="30"> </el-table-column>
        <!-- 个体工商户任务列表 -->
        <el-table-column prop="name" sortable="custom" label="任务名称" min-width="110"> </el-table-column>
        <el-table-column prop="businessName" sortable="custom" min-width="110" label="发布企业"></el-table-column>
        <el-table-column prop="platformName" sortable="custom" label="用工平台"> </el-table-column>
        <el-table-column prop="taskPayment" sortable="custom" min-width="110" label="预估服务款">
          <template #default="item">
            {{ formatNumber(item.row.taskPayment) }}
          </template>
        </el-table-column>
        <el-table-column prop="taskPayment" sortable="custom" min-width="110" label="实际服务款">
          <template #default="item">
            {{ formatNumber(item.row.taskPayment) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" sortable="custom" label="发布日期" width="150">
          <template #default="item">
            {{ format('yyyy-MM-dd', new Date(item.row.createTime)) }}
          </template>
        </el-table-column>
        <el-table-column prop="taskType" align="center" label="任务状态">
          <template #default="item">
            {{ taskType[item.row.taskStatus] }}
          </template>
        </el-table-column>
        <el-table-column prop="billedPayment" label="已开票" align="center">
          <template #default="item">
            <span v-if="item.row.billedPayment == null">-</span>
            <span v-else>{{ formatNumber(item.row.billedPayment) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="auditStatus" align="center" label="审核状态">
          <template #default="item">
            {{ auditStatus[item.row.auditStatus] }}
          </template>
        </el-table-column>
      </template>

      <template v-else-if="platformId != undefined">
        <!-- 灵工平台 -->
         <el-table-column width="30"> </el-table-column>
        <el-table-column prop="name" sortable="custom" label="任务名称" min-width="110"> </el-table-column>
        <el-table-column prop="businessName" sortable="custom" min-width="110" label="发布企业"></el-table-column>
        <el-table-column prop="industryMsg" sortable="custom" label="行业"> </el-table-column>
        <el-table-column prop="taskPayment" sortable="custom" min-width="110" label="预估服务款">
          <template #default="item">
            {{ formatNumber(item.row.taskPayment) }}
          </template>
        </el-table-column>
        <el-table-column prop="taskPayment" sortable="custom" min-width="110" label="实际服务款">
          <template #default="item">
            {{ formatNumber(item.row.taskPayment) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" sortable="custom" label="发布日期" width="150">
          <template #default="item">
            {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
          </template>
        </el-table-column>
        <el-table-column prop="endDate" sortable="custom" label="结束日期" width="150">
          <template #default="item">
						<template v-if="item.row.endDate == null">-</template>
            <template v-else>{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.endDate)) }}</template>
          </template>
        </el-table-column>
        <el-table-column prop="receivedPeopleNum" align="center" label="接单户数">
        </el-table-column>
        <el-table-column prop="taskType" label="任务状态">
          <template #default="item">
            {{ taskType[item.row.taskStatus] }}
          </template>
        </el-table-column>
      </template>

      <template v-else>
        <el-table-column type="selection" :reserve-selection="true" width="45"> </el-table-column>
        <el-table-column v-if="platformId != 1" prop="platformName" sortable="custom" label="用工平台"> </el-table-column>
        <el-table-column prop="businessName" sortable="custom" label="发布企业">
        </el-table-column>
        <el-table-column prop="name" sortable="custom" label="任务名称"> </el-table-column>
        <el-table-column prop="industryMsg" sortable="custom" label="行业"> </el-table-column>
        <el-table-column prop="taskPayment" sortable="custom" label="服务款">
          <template #default="item">
            {{ formatNumber(item.row.taskPayment) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" sortable="custom" label="发布日期" width="150">
          <template #default="item">
            {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
          </template>
        </el-table-column>
        <el-table-column prop="endDate" sortable="custom" label="结束日期" width="150">
          <template #default="item">
						<template v-if="item.row.endDate == null">-</template>
            <template v-else>{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.endDate)) }}</template>
          </template>
        </el-table-column>
        <el-table-column prop="receivedPeopleNum" align="center" label="接单户数">
        </el-table-column>
        <el-table-column prop="taskType" label="任务状态">
          <template #default="item">
            {{ taskType[item.row.taskStatus] }}
          </template>
        </el-table-column>
      </template>

      <el-table-column
        prop="caozuo"
        label="操作"
        width="70"
        class-name="editor"
      >
        <template #default="item">
          <router-link
            :to="{ path: '/assignmentDel', query: { id: item.row.id } }"
          >
            <el-button type="text">详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="tableData.length > 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="arrPage"
      :page-size="selectPage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "dashboard",
  props: ["search", "platformId", 'serviceId', 'bussinessId', 'indivdualId'],
  data() {
    return {
      getRowKeys(row) {
        // 获取row的key值
        return row.id;
      },
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      checkboxSelect: 0,
      currentPage4: 50,
      taskType: {
        0: "发布中",
        1: "进行中",
        2: "已结束",
      },
      tableData: [],
      currentPage: 1,
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
      dwonloadList: [], // 选中的数据
      auditStatus: {
        0: '待审核',
        1: '已完成',
        2: '驳回'
      }
    };
  },
  mounted() {
    this.gettablelist()
  },
  methods: {
    gettablelist() {
      if (this.platformId != undefined) {
        // 灵活用工平台
        this.getplatformData();
      } else if (this.serviceId != undefined) {
        // 服务者
        this.getserviceData();
      } else if (this.bussinessId != undefined) {
        // 企业
        this.getBussinessData();
      } else if (this.indivdualId != undefined) {
        // 个体工商户
        this.getIndivdualData();
      } else {
        this.getTableData();
      }
    },
    getTableData() {
      // 获取列表信息 暂无接口
      this.$http({
        url: "/api/task/selectTaskInfoByMixed",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          mixedStr: this.search,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          platformId: "", // 灵活用工平台id
          taskId: "", // 任务Id
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    getplatformData() {
      // 灵活用功详情获取任务列表
      this.$http({
        url:
          "/api/platform/selectTaskInfoByPlatform?platformId=" +
          this.platformId,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          mixedStr: "",
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          platformId: this.platformId,
          taskId: "",
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    getserviceData() {
      // 服务者详情获取任务列表
      this.$http({
        url: "/api/sevicer/selectTaskInfoBySevicer",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          mixedStr: "",
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          platformId: "", // 灵活用工平台id
          sevicerId: this.serviceId, // 服务者id
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0 && data.result !== null) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    getBussinessData() {
      // 企业详情获取任务列表
      this.$http({
        url: "/api/business/selectTaskInfoByPlatform",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          mixedStr: "",
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          businessId: this.bussinessId, // 企业id
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    getIndivdualData() {
      // 个体工商户详情获取任务列表
      this.$http({
        url: "/api/selfbusiness/selectTaskInfoBySelfId",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          selfBusinessId: this.indivdualId, // 企业id
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.gettablelist()
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.gettablelist()
    },
    handleSelectionChange() {},
    excelDownload() {
      // 下载
      let checkSelect = new FormData();
      for (let i = 0; i < this.dwonloadList.length; i++) {
        checkSelect.append("list", this.dwonloadList[i].id);
      }
      axios({
        method: "POST",
        url: "/api/task/taskExcel",
        data: checkSelect,
        responseType: "blob",
        headers: {
          Authorization: localStorage.getItem("hegui_token")
        }
      })
        .then((res) => {
          const blob = new Blob([res.data]);
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          //后台再header中传文件名
          downloadElement.href = href;
          downloadElement.download = "任务信息"+ this.format("yyyyMMddhhmmss", new Date()) +".xlsx";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        })
        .catch((err) => {
          console.log(err);
        });
    },
    downloadWhether(d) {
      this.checkboxSelect = d.length;
      this.dwonloadList = d
    },
    cleanSelection() {
      // 清空选择
      this.$refs.multipleTable.clearSelection();
    },
    sortChange(d) {
				// 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == "businessName" || d.prop == "industyMsg" || d.prop == "platformName" || d.prop == "name") {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      if (this.platformId != undefined) {
        // 灵活用工平台
        this.getplatformData();
      } else if (this.serviceId != undefined) {
        // 服务者
        this.getserviceData();
      } else if (this.bussinessId != undefined) {
        // 企业
        this.getBussinessData();
      } else if (this.indivdualId != undefined) {
        // 个体工商户
        this.getIndivdualData();
      } else {
        this.getTableData();
      }
    },
  },
};
</script>

<style scoped>
.editor .el-button--text {
  transform: scale(0.85);
}

.editor .el-table .cell {
  padding-left: 0;
}

.cardTitee .download {
  color: #95a8be;
  font-size: 12px;
  margin: 15px 20px 15px;
}

.download i {
  color: #326cf0;
}

.cardTits .el-table td.editor {
  color: #326cf0;
  cursor: pointer;
}

.download b {
  color: #326cf0;
  margin: 0 3px;
}

.download span {
  color: #326cf0;
  border: 1px solid #326cf0;
  padding: 3px 7px;
  border-radius: 5px;
  background: #f2f3fe;
  margin: 0 10px 0 50px;
  cursor: pointer;
}

.download em {
  color: #326cf0;
  font-style: normal;
  border-left: 1px solid #999;
  padding-left: 10px;
  cursor: pointer;
}

.el-pager li {
  color: #6c8198;
  font-weight: normal;
  border: 1px solid #eef4fb;
  border-radius: 5px;
  padding: 0;
  margin: 0 5px;
  height: 30px;
  line-height: 30px;
  min-width: 32px;
}

.el-pager li.active {
  color: #fff;
  cursor: default;
  background: #326cf0;
}

.cardTit {
  color: rgba(10, 46, 106, 1);
  line-height: 50px;
  padding-left: 20px;
  font-size: 14px;
  font-weight: normal;
}

.cardTit .el-input__inner {
  width: 120px;
  height: 32px;
  line-height: 32px;
}

.cardTit .el-select {
  float: right;
  margin: 10px 18px 0 0;
}

.cardTit .el-input__suffix {
  top: 5px;
}


.cardTit .el-select .el-input .el-select__caret.is-reverse {
  top: -10px;
  position: relative;
}

.cardTits .el-card {
  border-radius: 5px;
}

.cardTitdd .el-card {
  height: auto;
}

.cardTit b {
  float: right;
  font-size: 12px;
  font-weight: normal;
  margin-right: 30px;
  color: #326cf0;
  cursor: pointer;
}
</style>
